<template>
    <el-container v-show="drawer" class="Drawer">
        <el-tabs v-model="activeName2" style="width: 100%" type="card">
            <el-tab-pane label="测试用例" style="height: 183px" name="first">
                <div>
                    <el-input class="textarea" placeholder="请按照题目输入格式输入测试用例" type="textarea" :rows="6" v-model="text">
                    </el-input>
                </div>
                <div class="mt-1">
                    <el-button v-if="range !== 'codeforces'" class="btn-11" :loading="loading" @click="runcode()">
                        <el-icon>
                            <CaretRight />
                        </el-icon>运行测试
                    </el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="执行结果" style="height: 183px" name="second">
                <div style="height: 157px">
                    <div class="row m-0">
                        <div style="line-height: 32px; width: 70px" class="text-right">输出:</div>
                        <div class="col">
                            <pre>{{ ouput.stdout }}</pre>
                        </div>
                    </div>
                    <div class="row m-0">
                        <div style="line-height: 32px; width: 70px" class="text-right">时间:</div>
                        <div class="col">
                            <pre>{{ ouput.t }}ms</pre>
                        </div>
                    </div>
                    <div class="row m-0">
                        <div style="line-height: 32px; width: 70px" class="text-right">错误:</div>
                        <div class="col">
                            <pre>{{ ouput.stderr }}</pre>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-container>
</template>

<script setup lang="ts">
import { CaretRight } from '@element-plus/icons-vue';
import { ElInput } from 'element-plus';
import { computed, ref, useAttrs } from 'vue';
import Studycodemodel from '../../mysql_interface/studycodemodel';
const emits = defineEmits<{ (e: 'update:textarea', value: string): void }>()
defineProps<{ ouput: Studycodemodel.Iuserquestioninfo, drawer: boolean, runcode: Function, loading: boolean, range?: string }>()
const attrs = useAttrs()
const text = computed<string>({
    get() {
        return attrs.textarea as string
    },
    set(v) {
        emits('update:textarea', v)
    }
})

const activeName2 = ref<'first' | 'second'>('first')
defineExpose({
    activeName2
})

</script>

<style scoped>
.Drawer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #dfdfdf;
    min-height: 200px;
}
</style>
